<template>
  <div class="financialdetail">
    <p class="jsdetaillist">结算单明细列表</p>

    <div class="btn">
      <el-button type="primary" @click="send()">发送</el-button>
     
    </div>

    <div class="table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column prop="statementId" label="结算单号"> </el-table-column>
        <el-table-column prop="goodsTypeNum" label="品种数量">
        </el-table-column>
        <el-table-column prop="totalWeight" label="总重量(kg)">
        </el-table-column>
        <el-table-column prop="totalStatementPrice" label="结算金额">
        </el-table-column>
        <el-table-column prop="checkDate" label="收货日期"> </el-table-column>
        <el-table-column prop="statementDate" label="结算日期">
        </el-table-column>
        <el-table-column prop="status" label="订单状态">
          <template slot-scope="scope">
            {{ scope.row.status | statusFitlter }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" @click="todetail(scope.row.statementId)"
              >明细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>


    <!-- 付款方式弹框 -->
    <el-dialog
      title="请选择付款方式"
      :visible.sync="FKrDialogVisible"
      width="35%"
      center
    >
      <div class="radio" style="text-align:center">
        <el-radio-group v-model="payType">
          <el-radio :label="0">现金</el-radio>
          <el-radio :label="1">银行转账</el-radio>
          <el-radio :label="2">移动支付</el-radio>

        </el-radio-group>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="FKrDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="finishconfirm()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页数据 -->
    <el-pagination
      @current-change="handleCurrentChange"
      background
      :current-page="pagenum"
      :page-size="pagesize"
      layout="prev,pager,next"
      :total="total - 0"
      style="margin-top:20px;text-align:center"
    ></el-pagination>
  </div>
</template>

<script>
import {
  getaccountList,
  uploadAccessory,
  finnishedbutton
} from "@/api/account.js";
import { getToken } from "@/utils/auth";
export default {
  filters: {
    statusFitlter(value) {
      if (value === 0) {
        return "待确认";
      } else if (value === 1) {
        return "已发送";
      } else if (value === 2)  {
        return "已结算";
      }else if (value === 3)  {
        return "已验收";
      }
    }
  },
  data() {
    return {
      
      FKrDialogVisible: false,
      // 选中按钮的订单编号集合
      statementIdList: [],
      payType: "",
      tableData: [],
      multipleTable: [],
      // 显示第几页
      pagenum: 1,
      total: "",
      // 每页显示的数据
      pagesize: 10
    };
  },
  mounted() {
    this.init();
    console.log(this.headers);
  },

  methods: {
   
    init() {
      var data = {
        supplierId: this.$route.query.supplierId,
        pageNo: this.pagenum
      };
      getaccountList(data)
        .then(res => {
          console.log(res);
          this.tableData = res.rows;
          this.total = res.total;
          
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 搜索
    search() {
      this.init();
    },
    // 发送按钮
    send() {
      if (this.statementIdList == "") {
        this.$message.error("请选择结算单数据");
      } else {
        this.FKrDialogVisible = true;
      }
    },
    // 付款方式确认按钮
    finishconfirm() {
      var data = {
        statementIdList: this.statementIdList,
        payType: this.payType
      };
      finnishedbutton(data).then(res => {
        console.log(res);
        if (res.code === 20000) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.FKrDialogVisible = false;
          this.init()
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 明细跳转
    todetail(id) {
      this.$router.push({
        path: "financialdetail-detail",
        query: { statementId: id }
      });
    },
    // 选择按钮时触发
    handleSelectionChange(val) {
      var arr = val.map(i => {
        return i.statementId;
      });
      this.statementIdList = arr;
      console.log(this.statementIdList);
    },
    // 当前第几页
    handleCurrentChange(val) {
      console.log(val);
      this.pagenum = val;
      this.init();
    }
  }
};
</script>

<style lang="scss" scoped>
.financialdetail {
  padding: 20px 20px;
  .jsdetaillist {
    font-size: 22px;
    margin-bottom: 60px;
  }
  .btn {
    text-align: right;
    margin: 30px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
